<template>
  <div class="container" v-show="visible">
    <div class="title">
      <span class="title-cancle" @click="visible = false"> x </span>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">文章ID</div>
        <input class="ipt" v-model="formData.id" />
      </div>
      <div class="form-item">
        <div class="label">文章标题</div>
        <input class="ipt" v-model="formData.title" />
      </div>
      <div class="form-item">
        <div class="label">文章标签</div>
        <input class="ipt" v-model="formData.label" />
      </div>
      <div class="form-item">
        <div class="label">作者</div>
        <input class="ipt" v-model="formData.author" />
      </div>
      <div class="footer">
        <button class="confirm-btn" @click="confirm">确认</button>
      </div>
    </div>
    <!-- <div class="mask" @click="visible = false"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      formData: {
        id: "",
        title: "",
        label: "",
        author: "",
      },
    };
  },
  methods: {
    show(data = undefined) {
      if (data) {
        this.formData.id = data.id;
        this.formData.title = data.title;
        this.formData.label = data.label;
        this.formData.author = data.author;
      }
      this.visible = true;
    },
    confirm() {
      this.$emit("confirm", this.formData);
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.container {
  position: fixed;
  width: 400px;
  left: 50%;
  margin-left: -200px;
  height: 400px;
  top: 20%;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 1100;
}
.title {
  height: 50px;
  line-height: 50px;
  background: #001528;
  color: #fff;
  text-align: right;
}

.title-cancle {
  margin-right: 10px;
  cursor: pointer;
}
.form {
  padding: 20px;
}
.form-item {
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.label {
  width: 100px;
}

.footer {
  text-align: right;
  padding: 10px;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  opacity: 0.5;
  z-index: 10;
}
</style>